{template 'common/header'}
{template 'common/nav'}
<div class="mui-content">
<div id="slider" class="mui-slider" style="height:100%">   
    <header class="mui-bar mui-bar-nav">
      <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="font-size:0;">
        <div class="mui-scroll">
            <a class="mui-control-item mui-active" href="#item1mobile" data-status='-1'>全部</a>
            <a class="mui-control-item" href="#item2mobile" data-status='0'>待支付</a>
            <a class="mui-control-item" href="#item3mobile" data-status='1'>待参与</a>
            <a class="mui-control-item" href="#item4mobile" data-status='3'>已完成</a>
            <a class="mui-control-item" href="#item5mobile" data-status='5'>已取消</a>
            <a class="mui-control-item" href="#item6mobile" data-status='7'>已退款</a>
            <div id="sliderProgressBar" class="mui-slider-progress-ext"></div>
        </div>
      </div>
    </header>
    <div class="mui-slider-group" style="height:100%">
        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
            <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content"></div>
                </div>
             </div> 
        </div>
        
        <div id="item2mobile" class="mui-slider-item mui-control-content">
             <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
        <div id="item3mobile" class="mui-slider-item mui-control-content">
             <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
        <div id="item4mobile" class="mui-slider-item mui-control-content">
             <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
        <div id="item5mobile" class="mui-slider-item mui-control-content">
             <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
        <div id="item6mobile" class="mui-slider-item mui-control-content">
             <div class="mui-scroll-wrapper-ext">
                <div class="mui-scroll-ext">
                    <div class="list-content">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
        
    </div>
</div>
</div>
<script>
//屏蔽slider选项卡弹出遮罩
$('.mui-control-item').on("tap",function(e) {
	$("body").addClass('mui-backdrop-none');
	setTimeout(function() {
		$("body").find('.mui-backdrop').remove();
		$("body").removeClass('mui-backdrop-none');
	});
});
//取消订单
$(document).on('click','.cancel',function(){
	var recordid = $(this).attr('rid');
	var activityid = $(this).attr('aid');
	util.confirm('确认取消报名？', ' ', function(e) {
		if (e.index == 1) {
			$.post("{php echo app_url('records/records/cancel')}",{recordid:recordid,activityid:activityid},function(d){
				if(d.result == 1){
					util.toast('报名取消成功');
					setTimeout(function () {
						location.href = "{php echo app_url('records/records/list')}";
					}, 1000);
				}else{
					util.toast('报名取消失败');
				}
			},"json");
		} else {}
	})
});
//支付订单
$(document).on('click','.topay',function(){
	var recordid = $(this).attr('rid');
	$.post("{php echo app_url('records/records/topay')}",{recordid:recordid},function(d){
		if(d.status == 1){
			location.href = "{php echo app_url('pay/paytype/display')}&recordid="+recordid;
		}else{
			util.toast(d.result);
		}
	},"json");
});
//上拉加载活动列表
var loadItem=function(id,sn,status){
	var thispage = 1,pagesize = 10;
	var counter=0;//计数器
    $(id).find('.mui-scroll-ext').dropload({
        scrollArea : $(id).find('.mui-scroll-wrapper-ext'),
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: "{php echo app_url('records/records/ajax')}",
				data: {page:thispage,pagesize:pagesize,status:status},
                dataType: 'json',
                success: function(data){
					var stime = new Date(),result='',status=0;
					if (thispage > data.tpage || data.tpage == 0){
						me.lock();// 锁定
						me.noData();// 无数据
					}
					if (data.tpage == 0){
						result = '<div class="no-orders-at-all">'
						+'<div class="head-block">'
						+'    <div class="blank-icon mui-ext-icon mui-icon-mhuodong"></div>'
						+'    <p class="hint">当前没有任何信息</p>'
						+'    <p class="recommend-hint"></p>'
						+'</div></div>';
						$(id).find('.list-content').append(result);
						me.resetload();
						return false;
					}
                    for(var i = 0; i < data.lists.length; i++){
						status = parseInt(data.lists[i].status);
						price = data.lists[i].price;
						aprice = data.lists[i].aprice;
						payprice = data.lists[i].payprice;
						paytype = data.lists[i].paytype;
						hascancel = parseInt(data.lists[i].hascancel);
						review = parseInt(data.lists[i].review);
						merchant  = data.lists[i].merchant;
						joinstime = new Date(data.lists[i].joinstime.replace(/-/g, "/"));
						joinetime = new Date(data.lists[i].joinetime.replace(/-/g, "/"));
						starttime = new Date(data.lists[i].starttime.replace(/-/g, "/"));
						endtime   = new Date(data.lists[i].endtime.replace(/-/g, "/"));
						jointime  = new Date(data.lists[i].jointime.replace(/-/g, "/"));
						
						sToend1 = joinetime.format('MM月dd日 hh:mm');//报名结束时间
						sToend2 = starttime.format('MM月dd日 hh:mm')+'~'+endtime.format('MM月dd日 hh:mm');//活动开始时间段
						btns = '<a href="'+"{php echo app_url('activity/detail')}&activityid="+data.lists[i].activityid+'" class="mui-btn mui-btn-warning">查看详情</a>';
						var statusmsg='';
						switch(status){
						case 0: statusmsg = aprice > 0 && paytype != 'delivery' ? '待支付':(paytype == 'delivery'?'线下付款':'');
								btns = aprice > 0 && paytype!='delivery' ? '<div class="mui-btn mui-btn-warning topay" rid="'+data.lists[i].id+'">去支付</div>' : btns;
								btns = (paytype != 'delivery' && hascancel==1 ? '<div class="mui-btn mui-btn-outlined cancel" rid="'+data.lists[i].id+'" aid="'+data.lists[i].activityid+'">取消报名</div> ': '')+btns;
								btns = btns + (paytype == 'delivery' && review ? '&nbsp;<a href="'+"{php echo app_url('records/qrcode')}&id="+data.lists[i].id+'" class="mui-btn mui-btn-warning mui-btn-outlined"><i class="fa fa-qrcode"></i>&nbsp;二维码</a>':'');break;
						case 1:statusmsg = '待参与';
							btns = btns + (review ? '&nbsp;<a href="'+"{php echo app_url('records/qrcode')}&id="+data.lists[i].id+'" class="mui-btn mui-btn-warning mui-btn-outlined"><i class="fa fa-qrcode"></i>&nbsp;二维码</a>' : '');break;
						case 2:statusmsg = '待参与';
							btns = (stime < joinetime && hascancel==1 ? '<div class="mui-btn mui-btn-outlined cancel" rid="'+data.lists[i].id+'" aid="'+data.lists[i].activityid+'">取消报名</div> ': '')+btns;
							btns = btns + (review ? '&nbsp;<a href="'+"{php echo app_url('records/qrcode')}&id="+data.lists[i].id+'" class="mui-btn mui-btn-warning mui-btn-outlined"><i class="fa fa-qrcode"></i>&nbsp;二维码</a>':'');break;
						case 3: statusmsg = '<font class="mui-text-success">已参与</font>';
							btns = btns + (review ? '&nbsp;<a href="'+"{php echo app_url('records/qrcode')}&id="+data.lists[i].id+'" class="mui-btn mui-btn-warning mui-btn-outlined"><i class="fa fa-qrcode"></i>&nbsp;二维码</a>':'');
						break;
						case 5: statusmsg = '<font color="#666">已取消</font>';break;
						case 7: statusmsg = '<font class="mui-text-error">已退款</font>';break;
						default:break;
						break;
						}
						if (review==0)statusmsg = '待审核';
						
						price =  '<div class="price '+(aprice > 0 && payprice=='' ?'':'mui-text-success')+'"><span class="mui-small">合计:￥</span><span class="mui-big">'+price+'</span> </div> ';
						price = aprice == '' ? '<div class="price mui-text-success">免费</div>' : price;
						
						result+= '<div class="field">'
						+'    <div class="field-head">'
						+'        <span class="field-head-name"><i class="icon iconfont icon-shop"></i> ' + merchant.name + '</span>'
						+'        <span class="field-head-status field-head-status-light">'+statusmsg+'</span>'
						+'    </div>'
						+'    <a class="field-item" href="javascript:;">'
						+'    <div class="avatar" style="background-image:url('+"{$_W['attachurl']}"+data.lists[i].thumb+')"></div>'
						+'    <div class="contentt">' + (aprice !='' ?'<p class="mui-badge mui-pull-right mui-badge-inverted mui-rmb">'+aprice+'</p>':'')
						+'        <p class="delivery_tip">'+data.lists[i].title+'</p>'
						+'        <p class="order-time">'+sToend2+'</p>'
						+'        <p class="pp_time mui-small" id="pp_'+sn+'_'+thispage+'_'+i+'"></p><p class="mui-badge mui-pull-right mui-badge-inverted">×'+data.lists[i].teamnum+'</p>'
						+'    </div>'
						+'    <i class="field-arrow icon-arrow-right"></i></a>'
						+'    <div class="field-console">'
						+'        <div class="field-console-btns">'
						+'            '+price
						+'            '+btns
						+'        </div>'
						+'    </div>'
						+'</div>'
						+'<script>FreshTime("#pp_'+sn+'_'+thispage+'_'+i+'","'+data.lists[i].starttime+'","'+data.lists[i].endtime+'");var sh;sh=setInterval(function(){FreshTime("#pp_'+sn+'_'+thispage+'_'+i+'","'+data.lists[i].starttime+'","'+data.lists[i].endtime+'")},1000);<\/script>';
                    }
					
					thispage++;
					$(id).find('.list-content').append(result);
					// 每次数据加载完，必须重置
					me.resetload();
                },
                error: function(xhr, type){
                    // alert('加载失败，请刷新下重试!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
}
$(function() {
	var item_index = parseInt('{$index}');
	if (item_index){
		mui('#slider').slider().gotoItem(item_index);
		$('#item1mobile').find('.list-content').append('<div class="mui-loading"><div class="mui-spinner"></div></div>');
	}else{
		loadItem('#item1mobile',0,$('.mui-control-item.mui-active').data("status"));
	}	
});
//滑动效果
(function(m) {
	var htmlFont = $("html").css("font-size").replace('px',''),
		itemWidth = new Array(),
		itemID =  new Array(),
		transX = 0;
		$(".mui-control-item").each(function(key){
			itemWidth[key]=$(this).width();//初始化每个control-item的宽度
			itemID[key]=document.getElementById('item'+(key+1)+'mobile');//初始slider-item,ID
		});
		//alert($(itemID[0]).find('.mui-scroll-wrapper-ext').html());
		$('#sliderProgressBar').css("width",itemWidth[0]);
		document.getElementById('slider').addEventListener('slide', function(e) {
		var sn = e.detail.slideNumber,//初始化当前被激活的item序号
			itemX=0;
		//初始化每次进度条滑动的距离
		for (var i = 0; i < sn; i++ ){
			itemX += itemWidth[i];
		}
		transX = itemX/htmlFont+0.7*sn;
		//$('#sliderProgressBar').stop().animate({left:transX+'rem'},200);
		$('#sliderProgressBar').css('left',transX+'rem');
		setTimeout(function() {
			$('#sliderProgressBar').css('width',itemWidth[sn]);
		}, 150);
		if (itemID[sn].querySelector('.mui-loading')) {
			setTimeout(function() {
				itemID[sn].querySelector('.list-content').innerHTML = '';
				loadItem(itemID[sn],sn,$('.mui-control-item.mui-active').data("status"));
			}, 600);
			
		}
	});
})(mui);


//格式化日期
Date.prototype.format = function(format) {
    var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
    }
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

//计时
function FreshTime(id,starttime,endtime){
	var st = starttime.replace(/-/g,"/"),//开始时间
	    et = endtime.replace(/-/g,"/");//结束时间
		st = new Date(st);//开始时间
	    et = new Date(et);//结束时间
		//console.log(st);
	var nowtime = new Date(),//当前时间
		start_time = parseInt(st.getTime()),
		end_time = parseInt(et.getTime()),
		now_time = parseInt(nowtime.getTime()),
		lefttime = 0; 
	if (start_time > now_time){
		lefttime = parseInt((start_time - now_time)/1000);
	}else if(end_time > now_time){
		lefttime = parseInt((end_time - now_time)/1000);
	}
	//var bar_width =  (1-(lefttime/3600))*100+"%"; //计算进度条百分比
	if (lefttime > 0) {
		dd=parseInt((lefttime/86400));
		hh=parseInt((lefttime/3600))-dd*24;
		mm=parseInt((lefttime/60)%60);
		ss=parseInt(lefttime%60);
		if (start_time > now_time){
			$(id).html('<span id="ti_time_day">'+dd+'</span>天<span id="ti_time_hour">'+hh+'</span>:<span id="ti_time_min">'+mm+'</span>:<span id="ti_time_sec">'+ss+'</span>开始');
		}else if(end_time > now_time){
			$(id).html('<span id="ti_time_day">'+dd+'</span>天<span id="ti_time_hour">'+hh+'</span>:<span id="ti_time_min">'+mm+'</span>:<span id="ti_time_sec">'+ss+'</span>结束');
		}
		//$('#progressbar').css("width",bar_width);
	}else{
		$(id).html('<font color="#FF0000">活动结束</font>');
	}
}
</script>
</body>
</html>